<template>
	<view>
		<page-head headTitle="订单需求" :returnButton="true" @clickLeftReturn="clickLeftReturn"></page-head>
		<view class="m-t9 ">
			<view class="flex p-l-r3 align-center search-h">
				<view class="bg-bar bg-color"></view>
				<text class="fs-g ml-1">用户信息</text>
			</view>
			<view class="flex search-h align-center p-l-r3 m-b2">
				<view class="flex align-center fs-3">
					<image :src="userInfo.avatar" class="contact-picture border-r1">
					<text class="p-l-r3">{{userInfo.user_nickname}}</text>
					<navigator :url="'../../chatDetails/chatToUser?id='+userInfo.id" class="flex-1 border-rigth"><image src="/static/images/news.png" class="guide-news"></navigator>
				</view>
			</view>
			
			<border></border>
			<view class="flex p-l-r3 align-center search-h">
				<view class="bg-bar bg-color"></view>
				<text class="fs-g ml-1">需求信息</text>
			</view>
			<view class="flex p-l-r3 p-t-b3">
				<text class="contacts display-inline fs-3">需求描述：</text>
				<view class="flex fs-3 flex-1">
					<text class="color-table">{{orderInfo.demands}}</text>
				</view>
			</view>
			<border></border>
			<view class="flex align-center p-l-r3 p-t3 p-b1">
				<text class="contacts display-inline fs-3">用户评价</text>
			</view>
			<view class="p-l-r3">
				<view class="flex justify-between">
					<view class="flex align-center">
						<view class="ml-2 flex align-center">	
							<view class="p-t-b1"><uni-rate disabled="true" :value="comment.score" size="12"></uni-rate></view>
						</view>
					</view>
				</view>
				<view class="fs-24 p-t-b1">{{comment.content}}</view>
			</view>
			<view class="p-l2 p-r2 m-b">
				<image v-for="(images,index) in comment.images" :src="images" class="all-pic p-l1 p-r1" mode="widthFix"></image>
				
			</view>	
		</view>
	</view>
</template>

<script>
import pageHead from '@/components/common/page-head.vue'
import uniRate from '@/components/uni-ui/uni-rate/uni-rate.vue'
import border from '@/components/common/border.vue'
	export default {
		components:{
			pageHead,
			uniRate,
			border
		},
		data() {
			return {
				orderInfo:{},
				userInfo:{},
				comment:{}
				
			}
		},
		onLoad(e) {
			this.orderSn = e.sn;
			this.getDetailsInfo();
		},
		methods: {
			clickLeftReturn(){
				const pages = getCurrentPages() ;
				if(pages.length >1) {
					uni.navigateBack({
						delta: 1
					});
				}else{
					//返回上一页失败后强制回到首页
					uni.redirectTo({
						url: '../index/index'
					})
				}
			},
			getDetailsInfo(){
				this.$myRequest({
					method:'POST',
					url:'/api/guide/customize',
					data:{sn:this.orderSn}
				}).then(res=>{
					console.log(res);
					if(res.data.code == 1){
						let order = res.data.data.order;
						let user = res.data.data.user;
						let comment = res.data.data.comment;
						this.orderInfo = order;
						this.userInfo = user;
						this.comment = comment;
					}	
					
				})
				
			}
		}
	}
</script>

<style scoped>
page{background-color: #FFFFFF;}
.contact-picture{width: 60rpx;height: 60rpx;}
.guide-news{width: 35rpx;height: 33rpx;}
.contacts{width: 170rpx;}
.guide-letter{letter-spacing: 18rpx;}
.number{letter-spacing: 58rpx;}
.user-pic{width: 60rpx;height: 60rpx;}
.all-pic{width: 25%;height: auto;}
.bg-bar{width: 8rpx;height: 31rpx;}
.personal-active text{width: 120rpx;height: 44rpx;display: inline-block; background-color: #fff5ee;border: 2rpx solid #ff802e;color: #ff802e;text-align: center;line-height: 1.5;}
</style>
